<html>
<head>
    <meta charset="utf-8">
    <title>黑马旅游-注册</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" href="css/register.css">
	<script src="js/jquery-3.3.1.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.19.0.js"></script>
	<style>
        #msg {
            color: red;
            font-size: 12px;
        }
		
		 #sendSmsCode {
            font-size: 12px;
        }
    </style>
</head>
<body>
<!--引入头部-->
<div id="header">
</div>
<!-- 头部 end -->
<div class="rg_layout" id="app">
    <div class="rg_form clearfix">
        <div class="rg_form_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>
        <div class="rg_form_center">
            <!--注册表单-->
            <form id="registerForm">
                <table style="margin-top: 25px;width: 558px">
                    <tr>
                        <td class="td_left">
                            <label for="username">用户名</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="username" placeholder="请输入账号" v-model="user.username" @blur="checkUsername">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="telephone">手机号</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="telephone" placeholder="请输入您的手机号" v-model="user.telephone">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="password">密码</label>
                        </td>
                        <td class="td_right">
                            <input type="password" id="password" placeholder="请输入密码" autocomplete="off" v-model="user.password">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="smsCode">验证码</label>
                        </td>
                        <td class="td_right check">
                            <input type="text" maxlength="6" id="smsCode" class="check" placeholder="请输入验证码" v-model="smsCode">
                            <input type="button" id="sendSmsCode" :value="btnText" :disabled="btnDisabled" @click="sendSms" class="btn btn-success"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                        </td>
                        <td class="td_right check">
                            <input type="button" class="submit" value="注册" @click="userSubmit();">
                            <span id="msg" :style="{color:infoColor}">{{msg}}</span>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="rg_form_right">
            <p>
                已有账号？
                <a href="login.html">立即登录</a>
            </p>
        </div>
    </div>
</div>
<!--引入尾部-->
<div id="footer">
</div>
<script src="js/include.js"></script>

<script type="text/javascript">
    new Vue({
            el:"#app",
            data:{
                //验证码
                smsCode: '',
                //用户实体类
                user: {},
                //错误信息
                msg: '',
                //提示信息的颜色
                infoColor: "red",
                //发送按钮上面的文字
                btnText: '发送手机验证码',
                //按钮可用
                btnDisabled: false
            },
            methods:{
                //注册方法
                userSubmit(){
                    //1. 校验手机号是否合法
                    //手机号的正则表达式
                    var reg = /^1[345678]\d{9}$/;
                    if(!reg.test(this.user.telephone)){
                        this.msg="手机号非法";
                        this.infoColor="red";
                        return;
                    }
                    //2.判断用户名与密码不为空
                    if(this.user.username && this.user.password && this.smsCode){

                        //3.提交异步注册请求
                        axios.post("user/register?smsCode="+this.smsCode,this.user)
                             .then(response => {
                                let resultInfo = response.data;
                                //判断是否注册成功
                                 if(resultInfo.success){
                                     //成功，跳转到register_ok.html页面
                                     location.href = "register_ok.html";
                                 }else{
                                     //失败，显示错误消息
                                     this.msg=resultInfo.message;
                                     this.infoColor="red";
                                     return;
                                 }
                              })
                              .catch(error=>{
                                  console.log(error)
                                  alert("服务器忙...");
                              });
                    }else{
                        this.msg="用户名或密码或验证码不能为空";
                        this.infoColor="red";
                        return;
                    }


                },

                //发送手机短信方法
                sendSms(){
                    //1. 校验手机号是否合法
                    //手机号的正则表达式
                    var reg = /^1[345678]\d{9}$/;
                    if(!reg.test(this.user.telephone)){
                        this.msg="手机号非法";
                        this.infoColor="red";
                        return;
                    }
                    //2. 发送验证码
                    axios.get("/user/sendSms?telephone="+this.user.telephone).then(resp=>{
                        //得到resultInfo
                        var resultInfo = resp.data;
                        if(resultInfo.success){
                            //发送成功
                            this.infoColor="green";
                            this.countDown(60);
                        }else{
                            //发送失败
                            this.infoColor ="red";
                        }
                        this.msg = resultInfo.message;
                    })
                },

                //倒计时60秒实现
                countDown(num){
                    //1. 先把按钮设置为禁用
                    this.btnDisabled=true;
                    this.btnText=num+"秒之后重新发送";
                    //2. 开启倒计时
                    var timerId = setInterval(()=>{
                        num--;
                        this.btnText=num+"秒之后重新发送";
                        if(num==0){
                            //按钮变可用
                            this.btnDisabled=false;
                            this.btnText="重新发送";
                            //清楚定时任务
                            clearInterval(timerId);
                        }
                    },1000);
                },
                checkUsername(){
                    if (this.user.username.trim()==""){
                        this.msg="用户名不能为空";
                        this.infoColor="red";
                        return ;
                    }
                    axios.get("user/findByUsername?username="+this.user.username)
                         .then(response => {
                            let resultInfo = response.data;
                            if (resultInfo.success){
                                this.infoColor="green";
                            }else {
                                this.infoColor="red";
                            }
                            this.msg=resultInfo.message;
                          })
                          .catch(error=>{
                              console.log(error)
                              alert("服务器忙...");
                          });
                }
            }
        })
</script>
</body>
</html>
